<template>
	<div>
		<Modal
		  v-model="modal"
		  class="modal-full modal-apply_confirm"
		  width=1200
		>
			<div
			  slot="header"
			  class="ivu-modal-header-inner"
			>
				申请认款
				<span class="title-sub">{{step===1?"认款流水查询":"新增认款申请"}}</span>
	</div>
	<div v-if="modalShow">
		<ModelComponent
		  v-if="step===1 && isParse"
		  :initFetch="false"
		  :searchCol="3"
		  @selectStatus="selectedChange"
		  ref="item"
		  :singleSelect="true"
		  :model="parseModel"
		  :hasCheck="true"
		  :fixedFilter="fixedFilter"
		></ModelComponent>
			<Form-control
			  v-if="step===2"
			  :col="3"
			  @validate="validateChange"
			  :module="actionModel.code+'_form'"
			  ref="form"
			  :model="formModel"
			></Form-control>
	</div>
	<div
	  slot="footer"
	  class="button-panel-button"
	>
		<i-button @click="close">取消</i-button>
		<Button
		  v-if="enableStorage && isParse && !nextLoading && (step!=2 || formModel)"
		  @click="actionStorage"
		  type="success"
		>暂存</Button>
			<i-button
			  v-if="step===1"
			  @click="next"
			  :disabled="!listSelect"
			  :loading="nextLoading"
			  type="primary"
			>下一步</i-button>
				<i-button
				  v-if="step===2"
				  @click="last"
				>上一步</i-button>
					<i-button
					  v-if="step===2"
					  @click="formSubmit"
					  :loading="posting"
					  :disabled="!enableSubmit"
					  type="primary"
					>确认</i-button>
						</div>
						</Modal>
						</div>
</template>  

<script>
import ModalBase from '../modalBase';
import $ from '@/common';
import FormControl from '@/components/form';
import ModelComponent from '@/node/gridPanel/index';
import { billParser } from '@/common/parser';
export default {
	extends: ModalBase,
	props: {},
	data() {
		return {
			pathModel: '/service/{app}/bill/model/{bill_code}?enable_access_token=true',
			pathSubmit: '/service/{app}/bill/data/{bill_code}',
			billModel: {},
			formModel: {},
			hasForm: false,
			nextLoading: false,
			parseModel: {},
			fixedFilter: {},
			step: 1,
			posting: false,
			listSelect: false,
			isParse: false,
		};
	},
	created() {},
	methods: {
		load() {
			this.nextLoading = false;
			this.step = 1;
			this.formModel = null;
			this.isParse = false;
			this.hasForm = false;
			if (this.storageData) {
				this.isParse = true;
				this.step = this.storageData.step;
				this.$set(this, 'parseModel', this.storageData.listModel);
				//需根据缓存状态恢复步骤
				if (this.storageData.step === 1) {
					this.$nextTick(() => {
						this.$refs.item.setSearchFormData(this.storageData.listFilter);
					});
				}
				if (this.storageData.step === 2 && this.storageData.formData) {
					this.$set(this, 'formModel', this.storageData.formModel);
					this.$nextTick(() => {
						this.$refs.form.setData(this.storageData.formData);
					});
				}
			} else {
				$.link(this.pathModel, null, {
					param: {
						...this.$parent.actionData,
						bill_code: this.actionModel.param.list_bill_code,
					},
				}).then(res => {
					this.billModel = res.data;
					this.parseModel = this.modelParser(res.data);
					this.afterLoad();
					this.isParse = true;
				});
			}
		},
		actionStorage() {
			this.$owner.$emit('action_storage', {
				action: this.actionModel,
				data: {
					formModel: this.formModel,
					formData: this.getFormData(),
					listModel: this.parseModel,
					listFilter: this.$refs.item && this.$refs.item.getSearchFormData(),
					step: this.step,
				},
			});
			this.storageClose();
		},
		next() {
			var paramData = {
				...this.actionData,
				...this.$refs.item.getSelectedDataRow(),
			};
			if (paramData.flow_status === '3' || paramData.flow_status === '5') {
				this.$Message.error('不可申请已认款或已入账的流水，请重新选择');
				return;
			}
			this.nextLoading = true;
			$.link(this.pathModel, null, {
				param: {
					...this.$parent.actionData,
					bill_code: this.actionModel.param.form_bill_code,
				},
			})
				.then(res => {
					this.formModel = billParser(res.data);
					this.step = 2;
					this.nextLoading = false;
					this.$nextTick(() => {
						var data = {};
						this.formModel.fields.forEach(field => {
							if (field.def_value !== undefined) {
								data[field.code] = $.composeValue(field.def_value, {
									parent: paramData,
								});
								if (data[field.code] === '' || data[field.code] === null) data[field.code] = undefined;
							}
						});
						data = $.setObj(data, res.data.data);
						for (let i in data) {
							data[i] = $.composeValue(data[i], {
								parent: paramData,
							});
							if (data[i] === 'now()') {
								data[i] = Date.parse(new Date());
							}
						}

						this.$refs.form.setData(data);
					});
				})
				.catch(() => {
					this.nextLoading = false;
				});
		},
		validateChange(v) {
			this.enableSubmit = v;
		},
		last() {
			this.step = 1;
		},
		afterLoad() {},
		modelParser(data) {
			return billParser(data);
		},
		selectedChange(v) {
			this.listSelect = v;
		},
		getFormData() {
			return this.$refs.form && (this.$refs.form.getData ? this.$refs.form.getData() : this.$refs.form.formData);
		},
		actionSubmit() {
			this.posting = true;
			$.link(this.getSubmitPath(), this.getFormData(), {
				method: 'put',
			})
				.then(res => {
					this.close();
					this.$parent.actionSuccess();
					this.$owner.update();
				})
				.finally(() => {
					this.posting = false;
				});
		},
		formSubmit() {
			this.$refs.form.doValidate();
			this.$nextTick(() => {
				if (!this.enableSubmit && !this.isValidate) {
					this.$Message.error('表单验证失败!');
				} else {
					this.actionSubmit();
				}
				this.isValidate = true;
			});
		},
		getSubmitPath() {
			return $.composePath(this.pathSubmit, {
				bill_code: this.actionModel.param.form_bill_code,
			});
		},
	},
	components: {
		ModelComponent,
		FormControl,
	},
};
</script>

<style lang="less">
.modal-apply_confirm {
	.title-sub {
		margin: 0 16px;
		padding: 3px 8px;
		border: 1px solid #168cf3;
		font-weight: normal;
		border-radius: 4px;
		display: inline-block;
		color: #168cf3;
		margin-top: -3px;
		font-size: 12px;
	}
}
</style>
